<template>
  <div class="userProfile-container">
    <van-nav-bar
      title="个人资料"
      left-arrow
      @click-left="$router.back()"
    />
    <van-cell title="头像"
      is-link
      center
      @click="$refs.file.click()"
    >
      <van-image
        width="30"
        height="30"
        round
        fit="cover"
        :src="user.photo"
      />
      <input
        type="file"
        hidden
        ref="file"
        accept="image/*"
        @change="onFileChange"
      >
    </van-cell>
    <van-cell
      title="昵称"
      is-link
      :value="user.name"
      @click="isShowName = true">
    </van-cell>
    <van-cell
      title="性别"
      is-link
      :value="user.gender === 0 ? '男' : '女' "
      @click="isShowGender = true"
    ></van-cell>
    <van-cell
      title="生日"
      is-link
      :value="user.birthday === '' ? '待完善' : user.birthday "
      @click="isShowBirthday = true"
    ></van-cell>

    <van-popup
      v-model="isShowAvatar"
      position="bottom"
      :style="{'height': '100%'}"
    >
      <update-avatar
        v-if="isShowAvatar"
        :file="file"
        @update-avatar="user.photo = $event"
        @close="isShowAvatar = false"
      ></update-avatar>
    </van-popup>

    <van-popup
      v-model="isShowName"
      position="bottom"
    >
      <update-name
        v-if="isShowName"
        v-model="user.name"
        @input="user.name = $event"
        @close="isShowName = false"
      ></update-name>
    </van-popup>

    <van-popup
      v-model="isShowGender"
      position="bottom"
    >
      <update-gender
        v-if="isShowGender"
        v-model="user.gender"
        @close="isShowGender = false"
      ></update-gender>
    </van-popup>

    <van-popup
      v-model="isShowBirthday"
      position="bottom"
    >
      <update-birthday
        v-if="isShowBirthday"
        v-model="user.birthday"
        @close="isShowBirthday = false"
      ></update-birthday>
    </van-popup>
  </div>
</template>
<script>
import updateAvatar from './components/updateavatar'
import updateName from './components/updatename'
import updateGender from './components/updategender'
import updateBirthday from './components/updatebirthday'
import { userProfile } from '@/api/user'
export default {
  name: 'UserProfile',
  data () {
    return {
      // 用户个人资料
      user: [],
      // 头像弹出层显示状态
      isShowAvatar: false,
      // 文件对象
      file: null,
      // 昵称弹出层显示状态
      isShowName: false,
      // 性别弹出层显示状态
      isShowGender: false,
      // 生日弹出层显示状态
      isShowBirthday: false
    }
  },
  components: {
    updateName,
    updateGender,
    updateBirthday,
    updateAvatar
  },
  methods: {
    // 获取用户个人信息
    async getUserProfile () {
      const res = await userProfile()
      this.user = res.data.data
    },
    // 文件change事件
    onFileChange () {
      // 在弹出层里面预览图片
      this.file = this.$refs.file.files[0]
      // 展示弹出层
      this.isShowAvatar = true
      // 为了解决相同文件不触发 change 事件，所以在这里手动的清空 file 的 value
      this.$refs.file.value = ''
    }
  },
  created () {
    this.getUserProfile()
  }
}
</script>
<style lang="less">
.van-popup--bottom{
  background: #000;
}
</style>
